<template>
  <div class="search-item search-select-dict-container">
    <el-select
      v-model="internalValue"
      :placeholder="placeholder"
      size="small"
      clearable
      filterable
    >
      <el-option
        v-for="item in dict"
        :key="item[props.value]"
        :label="item[props.label]"
        :value="item[props.value]"
      />
    </el-select>
  </div>
</template>
<script>
export default {
  name: 'SearchSelectDict',
  props: {
    value: {
      type: [String, Number],
      default: ''
    },
    placeholder: {
      type: String,
      default: ''
    },
    dict: {
      type: Array,
      default: function() {
        return []
      }
    },
    props: {
      type: Object,
      default: function() {
        return {
          label: 'name',
          value: 'value'
        }
      }
    }
  },
  computed: {
    internalValue: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  created() {
    this.$on('search-clear', function() {
      this.internalValue = ''
    })
  }
}
</script>
